import { useCallback, useEffect, useState } from 'react';
import { Image, Divider, Empty } from 'antd-mobile';
import moment from 'moment';
import { InbizIcon, useEvents } from '@inbiz/utils';
import { getMessage, TextWidget } from '@inbiz/react';
import { getNewsList as getNewsListData, getCounts } from '../../../service';
import viewIcon from '../../../icons/view.svg';
import defaultImg from '../../../icons/defaultImg.png';
import { NewsProps } from '../index';
import '../style.less';
import '../../locale'

const Card = (props: any) => {
    const { showCate, loadNumber, fixNewKey, standOut, goMore, goToDetail, seeMore, dataLoadWap, showPositionWap, showTextWap, data, setData } = props


    const [configEvents] = useEvents(props.callBackEvents, props.emit)

    const getNewsList = useCallback(async (params: object) => {
        const newParams = (await configEvents.current?.onParams?.(params)) || params;
        const data = await (configEvents.current?.onRequest || getNewsListData)(newParams as any)
        return await configEvents.current?.onData?.(data) || data
    }, []);

    const getData = async () => {
        try {
            let res: News.NewsList = await getNewsList({
                categoryId: fixNewKey?.map((item: any) => { return item.id }).toString(),
                pageIndex: 1,
                pageSize: loadNumber?.threshold,
                showNew: standOut?.isStandout,
                numNew: standOut?.threshold || undefined,
            });
            let _ids = res?.ContentList?.map((item) => item?.ID);
            let counts = await getCounts({ entitylds: _ids });
            let _data = res?.ContentList?.map((item) => {
                let _item = counts?.data?.find((item2: { EntityId: string; }) => item2?.EntityId == item?.ID);
                if (_item) {
                    return {
                        ...item,
                        View: _item?.View
                    }
                } else {
                    return item
                }
            });
            setData(_data);
        } catch (error) {

        }
    };

    useEffect(() => {
        getData();
    }, [fixNewKey?.length, loadNumber, standOut]);

    return (
        <>
            {data?.length > 0 ? <>
                <div className="card-content">
                    {
                        data?.map((item: any) => {
                            return (
                                <div className="card-item" key={item?.Id} onClick={() => { goToDetail(item) }}>
                                    <Image
                                        src={item?.ImgUrl == '/inbiz/wcm/UploadFile/Plugins/TextList/Content/Images/notfound.png' ? defaultImg : item?.ImgUrl}
                                        width={184}
                                        height={104}
                                        fit='cover'
                                        style={{ borderRadius: 6 }}
                                    />
                                    <div className="card-item-title">
                                        {showCate ? <span style={{ fontWeight: 'bold' }}>【{item?.ContentCategoryName}】</span> : null}
                                        {item?.Title}
                                    </div>
                                    <div className="card-item-time">
                                        {moment().isSame(new Date(item?.CreateTime), 'year') ? moment(item?.CreateTime).format('MM-DD') : item?.CreateTime}
                                    </div>
                                    <div className="card-item-creator">
                                        <div className='card-item-creator-person'>
                                            <Image
                                                src={`/ImageType/GetUserAvatarById?id=${item?.CreatorID}`}
                                                width={16}
                                                height={16}
                                                fit='cover'
                                                style={{ borderRadius: 8 }}
                                            />
                                            <div>{item?.Creator}</div>
                                        </div>
                                        <div className='card-item-creator-time'>
                                            <Image
                                                src={viewIcon}
                                                width={12}
                                                height={12}
                                                fit='cover'
                                            />
                                            <div>{item?.View}</div>
                                        </div>
                                    </div>
                                    {item?.IsNew && <div style={{ position: 'absolute', left: 0, top: -10 }}><InbizIcon type='icon-NEW' style={{ fontSize: 34 }} /></div>}
                                </div>
                            )
                        })
                    }
                </div>
                {
                    seeMore &&
                        dataLoadWap === 'more' &&
                        showPositionWap === 'right-bottom' ?
                        <div
                            onClick={goMore}
                            style={{
                                padding: 0,
                                height: 40,
                                lineHeight: '40px',
                                fontSize: '12px',
                                color: 'var(--inbiz-color-text)',
                                textAlign: 'right',
                            }}
                        >
                            <TextWidget>{showTextWap || ''}</TextWidget>&nbsp;{'>'}
                        </div>
                        : null
                }
                {
                    seeMore &&
                        dataLoadWap === 'more' &&
                        showPositionWap === 'bottom-center' ?
                        <Divider
                            style={{
                                margin: 0,
                                borderColor: '#ddd',
                                height: '40px',
                            }}
                        >
                            <div
                                onClick={goMore}
                                style={{
                                    padding: 0,
                                    fontSize: '12px',
                                    color: 'var(--inbiz-color-text)',
                                    textAlign: 'center',
                                }}
                            >
                                <TextWidget>{showTextWap || ''}</TextWidget>
                            </div>
                        </Divider>
                        : null
                }</>
                : <Empty
                    image={<InbizIcon type="icon-ic-zanwushuju" style={{ fontSize: '50px' }} />}
                    description={getMessage('News.noData')}
                />}

        </>
    )
}
export default Card;